<template>
    <div>
        <Modal v-model="modal" class="modal-full" title="关联设置" width=600>
            <div v-if="modalShow">
                <table class="form-field width-full">
                    <tr>
                        <td>
                            <label>主表键</label>
                        </td>
                        <td>
                            <SelectConrol :data="mainFields()" v-model="data.id_key_main" option-key="code"></SelectConrol>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>子表键</label>
                        </td>
                        <td>
                            <SelectConrol :data="slaveFields()" v-model="data.id_key_slave" option-key="code"></SelectConrol>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>类型</label>
                        </td>
                        <td>
                            <RadioGroup :string="true" v-model="data.type" :data="typeList"></RadioGroup>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template> 

<script>
import ModalBase from '../modalBase'
import $ from '@/common'
import RadioGroup from '@/element/radioGroup'
import SelectConrol from '@/element/select'

export default {
    extends: ModalBase,
    props: {
    },
    data() {
        return {
            data: {
                id_key_main: null,
                type: null,
                id_key_slave: null
            },
            typeList: [
                'inner',
                'outer',
                'bridge'
            ]
        }
    },
    created() { },
    methods: {
        load() {
            if (this.$parent.actionData.rm) {
                this.$set(this, 'data', $.copyJson(this.$parent.actionData.rm))
            }
        },
        mainFields() {
            for (let i in this.$owner.tableData) {
                if (this.$owner.tableData[i].enable_main) {
                    return this.$owner.tableData[i].fields
                }
            }
        },
        slaveFields() {
            return this.$parent.actionData.fields
        },
        actionSubmit() {
            this.$owner.setRowField({
                index: this.$parent.actionDataIndex,
                code: 'rm',
                value: this.data
            })
            this.close()
        }
    },
    components: {
        SelectConrol, RadioGroup
    }
}
</script>

<style lang="less">
table.form-field {
    width: 100%;
    td,
    th {
        padding: 4px
    }
    th {
        vertical-align: top;
        text-align: right;
        padding-right: 16px;
        line-height: 33px;
    }
}
</style>
